<script lang="ts" setup>
interface UserInfo {
  id: string
  phone: string
  nickname: string
  userType: 0 | 1 | 2
}

interface Props {
  modelValue: boolean
  user?: Partial<UserInfo> | null
}

interface Emits {
  (e: "update:modelValue", value: boolean): void
  (e: "confirm", payload: { reason: string }): void
}

const props = withDefaults(defineProps<Props>(), {
  user: null
})

const emit = defineEmits<Emits>()

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit("update:modelValue", value)
})

const formRef = ref()
const form = reactive({
  reason: ""
})

const rules = {
  reason: [
    { required: true, message: "请输入禁用原因", trigger: "blur" },
    { min: 2, max: 200, message: "长度在 2 到 200 个字符", trigger: "blur" }
  ]
}

function handleClose() {
  dialogVisible.value = false
}

async function handleConfirm() {
  await formRef.value.validate()
  emit("confirm", { reason: form.reason })
  dialogVisible.value = false
  form.reason = ""
}

const _userTypeText = computed(() => {
  if (props.user?.userType === 0) return "付费用户"
  if (props.user?.userType === 1) return "试用中"
  if (props.user?.userType === 2) return "试用已过期"
  return "-"
})

const userTypeTag = computed(() => {
  if (props.user?.userType === 0) return { text: "付费用户", type: "paid-user" as const }
  if (props.user?.userType === 1) return { text: "试用中", type: "trial-active" as const }
  if (props.user?.userType === 2) return { text: "试用已过期", type: "trial-expired" as const }
  return { text: "-", type: "info" as const }
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="禁用用户确认"
    width="640px"
    :before-close="handleClose"
    custom-class="disable-user-dialog"
  >
    <div class="content">
      <div class="tip-row">
        <el-icon class="tip-icon"><WarningFilled /></el-icon>
        <div class="tip-text">
          禁用用户后，该用户将无法登录系统，相关邀请码也将失效。此操作通常用于商户退款的账户处理。
        </div>
      </div>

      <div class="user-section">
        <div class="label">用户信息：</div>
        <div class="user-row">
          <div class="name">{{ props.user?.nickname || '-' }} ({{ props.user?.phone || '-' }})</div>
          <div class="type">
            <CustomTag :text="userTypeTag.text" :type="userTypeTag.type" />
          </div>
        </div>
      </div>

      <el-form ref="formRef" :model="form" :rules="rules" label-width="0px" class="reason-form">
        <el-form-item prop="reason">
          <el-input
            v-model="form.reason"
            type="textarea"
            :rows="3"
            placeholder="请输入禁用原因，如：商户申请退款"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="danger" @click="handleConfirm">确认禁用</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.disable-user-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
  }
}

.content {
  .tip-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--el-text-color-secondary);
    line-height: 1.6;
    margin-bottom: 16px;

    .tip-icon {
      color: var(--el-color-danger);
      font-size: 18px;
      margin-top: 2px;
    }
  }

  .user-section {
    margin: 12px 0 8px 0;

    .label {
      color: var(--el-text-color-secondary);
      margin-bottom: 8px;
    }

    .user-row {
      display: flex;
      align-items: center;
      gap: 12px;

      .name {
        font-weight: 800;
        color: var(--el-text-color-primary);
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
